<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { useArticleStore } from '@/stores/article';
    import type { ArticleItem } from '@/services/type';
    import { highlightText } from '@/utils';

    import { useRoute } from 'vue-router';

    import userIconSrc from '@/assets/image/user-icon.jpg';
    import LoadMore from '@/components/LoadMore/index.vue';

    defineProps<{data: ArticleItem[], loading: boolean}>();
    
    const route = useRoute();
    const articleStore = useArticleStore();

    // 搜索标题
    const p = ref(route.query.p);
    // 数据加载
    const loading = computed(() => articleStore.loading);

</script>
<template>
    <section class="blog-list">
        <el-skeleton :loading="loading" :rows="3" animated>
            <template #template>
                <div class="temp-box">
                    <div class="temp-img">
                        <el-skeleton-item variant="image" style="width: 200px; height: 135px" />
                    </div>
                    <div class="temp-text">
                        <el-skeleton-item variant="h1" style="width: 40%" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="h1" />
                        <el-skeleton-item variant="text" style="width: 10%" />
                    </div>
                </div>
            </template>
            <template #default>
                <section v-if="data.length == 0" class="box noData" style="display: table;min-height: 600px;width: 100%;">
                    <div class="no_data">
                        <svg-icon href='#icon-nodata' width="250px" height="250px"></svg-icon><br/>
                        <span v-if="p" style='color: darkcyan;'>没有搜索到相关文章信息，换个关键字试一下吧~</span>
                        <span v-if="!p" style='color: darkcyan;'>还没有添加文章哦~</span>
                    </div>
                </section>
                <article class="blog-item wow fadeInDown" v-for="item in data" :key="item.wznm">
                    <div class="details">
                        <div class="blog-img">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="blog-text">
                            <div class="blog-title">
                                <h3><a class="block-fea" :href="'/blog/detail/' + item.wznm" v-html="highlightText(item.title, String(p))"></a></h3>
                            </div>
                            <div class="blog-label">
                                <el-tag style="margin-right: 10px;"><el-icon><Folder /></el-icon>&nbsp;{{item.columnName}}</el-tag>
                                <el-tag v-for="(label, index) in item.label" :key="index" type="info" style="margin-right: 10px;">#&nbsp;{{ label }}</el-tag>
                            </div>
                            <p class="blog-describe">
                                {{item.description}}
                            </p>
                            <div class="item-meta">
                                <div class="item item-meta-user">
                                    <img :src="userIconSrc" />
                                    <user-card>
                                        <a class="user-info">{{item.auther_user_info.nickName}}</a>
                                    </user-card>
                                    <span class="point"></span>
                                    <span class="time">{{ item.releaseTime }}</span>
                                </div>
                                <div class="item item-meta-view">
                                    <p><el-icon><View /></el-icon>{{item.hits}}</p>
                                </div>
                                <div class="item item-meta-comment">
                                    <p><el-icon><ChatDotSquare /></el-icon>{{item.postNum}}</p>
                                </div>
                                <div class="item item-meta-collection">
                                    <p><el-icon><Star /></el-icon>0</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                <!-- 加载更多 -->
                <load-more 
                    v-show="data.length != 0" 
                    :param="articleStore.loadMoreParam" 
                    @click="articleStore.loadMore(String(p))" 
                />
            </template>
        </el-skeleton>
    </section>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />